<template>
    <el-dialog :title="title" v-if="open" v-model="open" width="1150px" append-to-body>
        <!-- <el-card class="box-card" shadow="always" v-show="showSearch"> -->
        <el-form ref="form" inline :model="form" :rules="rules" label-width="130px" @submit.native.prevent>
            <el-form-item label="模板名称:" prop="pptName">
                <el-input v-model="queryParams.pptName" @keyup.enter="handleQuery"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- </el-card> -->
        <el-card class="box-card" shadow="always" v-show="showSearch">
            <div class="main" v-loading="loading">
                <div v-for="(item, index) in dataSource" :key="index" class="table-item">
                    <ImagePreview :width="248" :height="350" :src="item.pptTopImg"
                        :preview-src-list="[item.pptTopImg]" />
                    <div class="btns" @click="itemClick(item)">
                        <!-- 查看 编辑 删除 -->
                        <el-checkbox @click.prevent v-model="item.checked" style="margin-right: 10px;"></el-checkbox>
                        <div>{{ item.pptName }}</div>
                    </div>
                </div>
            </div>
            <el-empty v-if="!dataSource.length" description="模板空空如也，赶紧设计个吧" />
            <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import listMixin from '@/mixins/listMixin';
export default {
    mixins: [listMixin],
    data() {
        return {
            title: '选择模板',
            open: false,
            queryParams: {//查询条件
                pageNum: 1,
                pageSize: 12
            },
            urls: {
                list: '/order/materialPpt/list',
                delete: '/order/materialPpt',

            }
        }
    },
    methods: {
        submitForm() {
            const checkedList = this.dataSource.filter(item => item.checked);
            if (checkedList.length === 0) {
                this.$modal.msgError('请选择模板');
                return;
            }
            this.$emit('ok', checkedList[0]);
            this.open = false;
        },
        itemClick(item) {
            this.dataSource = this.dataSource.map(v => (v.checked = false, v));
            item.checked = true
        },
        cancel() {
            this.open = false;
        },
        show() {
            this.open = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.main {
    height: calc(100vh - 300px);
    overflow-x: scroll;
}

.button-main {
    float: right;
    margin-top: -10px;
}

.table-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #e6ebf5;
    width: 250px;
    // position: relative;

}

.btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #F9FAFC;
    margin-top: -4px;
    padding: 0 12px;
    // position: absolute;
    // width: 40px;
    // height: 40px;
    // top: 0;

    .el-button {
        padding: 0;
    }
}
</style>